<!-- 
 * @Description:
 * @Date: 2024-06-25 21:24:10
 * @LastEditTime: 2024-09-13 10:53:40
-->
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '详情',
  },
}
</route>
<template>
  <view class="bg-#fff overflow-auto w-100% h-screen box-border p-20rpx">
    <view class="top-btn"><wd-button plain size="small">未完成</wd-button></view>

    <view class="tobe-title mt-30rpx">{{ detailList.title }}</view>
    <view class="tobe-time">发布日期： {{ formatTime(detailList.createTime, 'yyyy-MM-dd') }}</view>
    <view class="tobe-line"></view>
    <view v-html="detailList.content"></view>
  </view>
  <view class="question-btn" v-if="detailList.isQuizRequired">
    <view class="btn-tip">答完题目才算完成学习哦！</view>
    <wd-button
      plain
      hairline
      @click="handleAnswer(detailList.id)"
      class="btn flex items-center justify-between"
    >
      开始答题
    </wd-button>
  </view>
</template>

<script lang="ts" setup>
import { getTobeDetail } from '@/service/partBuilding/index'
import { formatTime, updateImageUrls } from '@/utils/index'
const baseurl = ref(import.meta.env.VITE_SERVER_BASEURL)

const handleAnswer = (id) => {
  uni.navigateTo({
    url: '/pages/PartyBuilding/TobeAnswer?id=' + id,
  })
}
const optionsId = ref()
const detailList = ref({})
const saveId = ref()
const params = reactive({
  id: 0,
  userId: 0,
})
const getTobeDetails = async () => {
  const data: any = await getTobeDetail({ ...params })
  detailList.value = data.data
  detailList.value.coverImage = `${baseurl.value}${detailList.value.coverImage}`
  detailList.value.content = updateImageUrls(detailList.value.content)
}
// 获取资讯详情
onLoad(async (options) => {
  optionsId.value = options.id
  uni.getStorageInfo({
    success: function () {
      // 单独获取 'user' 键的值
      uni.getStorage({
        key: 'user',
        success: function (res) {
          const data = JSON.parse(res.data)
          saveId.value = data.userInfo.residentId
          params.userId = saveId.value
          params.id = options.id
          getTobeDetails()
        },
        fail: function (err) {
          console.error('获取 user 失败:', err)
        },
      })
    },
  })
})
// isQuizRequired:true/false 答题或无需答题
</script>
<style lang="scss">
.top-btn {
  .wd-button.is-plain.is-primary {
    font-size: 28rpx !important;
    color: rgba(188, 13, 13, 1) !important;
    border-color: rgba(188, 13, 13, 1) !important;
  }
}
.tobe-line {
  margin: 24rpx 0;
  border-bottom: 2rpx solid #ccc;
}
.tobe-title {
  margin-bottom: 28rpx;
  font-size: 18px;
  line-height: 25px;
  color: rgba(27, 27, 27, 1);
  text-align: justify;
}
.tobe-time {
  font-size: 16px;
  line-height: 20px;
  color: rgba(113, 113, 113, 1);
  text-align: justify;
}
.fixed-button {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 99;
  width: 100%;
  transform: translateX(-50%);
}
.question-btn {
  height: 100rpx;
  padding: 40rpx !important;
  text-align: center;
  box-shadow: 0px -3px 6px 0px rgba(201, 201, 201, 0.4);
  .wd-button.is-plain.is-primary {
    width: 100%;
    color: #fff !important;
    background: #d71818 !important;
    border: none !important;
    border-radius: 18rpx !important;
  }
}
.btn-tip {
  margin-bottom: 16rpx;
  font-size: 24rpx;
  line-height: 34rpx;
  color: rgba(113, 113, 113, 1);
  text-align: center;
}
rich-text {
  line-height: 1.7;
}
</style>
